<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue';
import { useUserStore } from '../../store/user';
import {
  getUserLastUpdateUserNameDateApi,
  updateUserNameApi,
  updateGenderApi,
  updateSignatureApi,
  updateIsPublicPostApi,
  updateIsPublicCollectionApi,
  updateUserAvatarApi
} from '@/apis/userInfo';
import { getPostsListApi } from '@/apis/post';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router'
import post from '@/views/home/components/content/components/post.vue'
import { getCollectionListApi } from "@/apis/collection"
import { getFansIsMyAttentionApi, cancelAttentionApi } from "@/apis/fans"
import { addAttentionApi } from "@/apis/attention"
import { EstablishConnectionApi } from "@/apis/chat"

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();

/* 判断当前页面是不是自己的个人中心页面 */
const isOwnUserPage = computed(() => {
  return userStore.userInfo.id === Number(route.params.userId);
});
// #region 动态宽度代码

//动态设置头像:span宽度
const dynamicAvatar = computed(() => {
  return window.innerWidth < 768 ? 6 : 2;
})

//动态设置名字:span宽度
const dynamicName = computed(() => {
  return window.innerWidth < 768 ? 18 : 22;
})

// #endregion


// #region 粉丝关注获赞跳转代码
const toFans = () => {
  if (isOwnUserPage.value) {
    router.push('/message/fans');
  }
}

const toAttention = () => {
  if (isOwnUserPage.value) {
    router.push('/message/attention');
  }
}

const toGood = () => {
  if (isOwnUserPage.value) {
    router.push('/message/good');
  }
}
// #endregion


// #region 获得用户来到从注册开始来到论坛多久了
const time = computed(() => {
  const now = new Date();
  // 将字符串转换为日期对象
  const birthDate = new Date(userStore.info.registTime);

  // 计算日期差（毫秒）
  const timeDiff = now - birthDate; // 这将返回一个以毫秒为单位的差值

  // 转换为天数
  const days = Math.floor(timeDiff / (1000 * 3600 * 24));

  return days;
});
// #endregion


// #region 编辑名字代码
const userNameIsEditing = ref(false);
const userNameInput = ref(false)
const newUserName = ref(userStore.info.username);
const userNameRef = ref(null);


/* 判断是不是自己的个人页面，不是就不要显示修改 */
const UserNameIsEditingMouseEnter = () => {

  if (isOwnUserPage.value) {
    userNameIsEditing.value = true
  }

}

const UserNameIsEditingMouseLeave = () => {
  // if (!isOwnUserPage.value) {
  //   return;
  // }
  userNameIsEditing.value = false
}

/* 检查是否可以修改用户名 */
const checkUpdateUserNameTime = async () => {
  const res = await getUserLastUpdateUserNameDateApi(userStore.info.id);

  if (res.data !== 'ok') {
    // 计算下一次可以修改用户名的天数
    const daysUntilNextUpdate = res.data;
    const now = new Date();

    let lastUpdateDate = new Date(now); // 初始化为当前日期

    // 根据剩余天数判断上一次修改日期
    if (daysUntilNextUpdate === 30) {
      // 如果还有30天，说明今天刚修改的
      lastUpdateDate = now; // 上一次修改日期就是今天
    } else {
      // 否则，从当前日期减去过去的天数
      lastUpdateDate.setDate(now.getDate() - (30 - daysUntilNextUpdate));
    }

    // 格式化日期为可读的格式
    const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
    const formattedDate = lastUpdateDate.toLocaleDateString(undefined, options);

    ElMessage({
      type: 'error',
      message: `您上一次修改用户名是在 ${formattedDate}，离下一次可以修改用户名还有 ${daysUntilNextUpdate} 天`
    });
  } else {
    userNameInput.value = true;
    // 自动获取焦点
    nextTick(() => {
      userNameRef.value.focus();
    })

  }
}


/* 修改用户名代码 */
const handleUserNameEditor = async () => {

  /* 原名和新名不能相同 */
  if (userStore.info.username === newUserName.value) {
    ElMessage.error('新用户名不能与原用户名相同');
    return;
  }


  if (!validateUserName(newUserName.value)) {
    ElMessage.error('用户名只能包含2-11个字符，支持中英文、数字、下划线');
    return;
  }

  /* 发提示询问是否要修改用户名 */
  ElMessageBox.alert('您确定要修改用户名吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 用户确定操作
    await updateUserNameApi(userStore.userInfo.id, newUserName.value)

    // 再次获得我自己的信息
    userStore.getUserInfo(userStore.userInfo.id);

    /* 隐藏输入框 */
    userNameInput.value = false;
    userNameIsEditing.value = false;

  }).catch(() => {
    // 用户取消操作
  });
}




/* 正则验证用户名 */
const validateUserName = (username) => {
  const regex = /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,11}$/;
  return regex.test(username);
};


/* 取消编辑用户名代码 */
const cancelUserNameEditor = () => {
  /* 隐藏输入框 */
  userNameInput.value = false;
  userNameIsEditing.value = false;


}


// #endregion

// #region 编辑性别代码
const genderIsEditing = ref(false);
const genderRadio = ref(false)
// const newUserName = ref(userStore.info.username);
const radio = ref('');

/* 判断是不是自己的个人页面，不是就不要显示修改 */
const genderIsEditingMouseEnter = () => {

  if (isOwnUserPage.value) {
    genderIsEditing.value = true
  }

}

const genderIsEditingMouseLeave = () => {
  genderIsEditing.value = false
}

/* 显示选择性别单选框 */
const switchSelect = () => {
  genderRadio.value = true;
}


/* 修改性别代码 */
const switchGender = async () => {
  if (radio.value === '') {
    ElMessage.error('请选择性别');
  } else {
    await updateGenderApi(route.params.userId, radio.value);

    //再次获得我自己的信息
    userStore.getUserInfo(userStore.userInfo.id);
    genderRadio.value = false;
    genderIsEditing.value = false;

  }

}


// #endregion

// #region 编辑个签代码
const signatureInput = ref(null)
const signatureIsEditingIcon = ref(false)
const newSignature = ref(userStore.info.signature || '');
const signatureRef = ref(null);

/* 判断是不是自己的个人页面，不是就不要显示修改 */
/* 鼠标悬浮事件 */
const signatureIsEditingMouseEnter = () => {
  if (isOwnUserPage.value) {
    signatureIsEditingIcon.value = true
  }

}

/* 鼠标离开事件 */
const signatureIsEditingMouseLeave = () => {
  signatureIsEditingIcon.value = false
}

/* 点击icon图标事件 */
const accordingSignatureInput = () => {
  signatureInput.value = true;

  // 自动获取焦点
  nextTick(() => {
    signatureRef.value.focus();
  })
}


/* 取消编辑个签代码 */
const cancelSignatureEditor = () => {
  /* 隐藏输入框 */
  signatureInput.value = false;
  signatureIsEditingIcon.value = false;

}

/* 确认编辑个签代码 */
const handleSignatureEditor = async () => {

  /* 判断两次签名是否一致 */
  if (userStore.info.signature === newSignature.value) {
    ElMessage.error('新签名和旧的一样哎，铁汁');
    return;
  }

  if (newSignature.value.length > 50) {
    ElMessage.error('个性签名不能超过50个字符');
    return;
  }

  /* 发送请求 */
  await updateSignatureApi(userStore.userInfo.id, newSignature.value);

  /* 重新获取用户信息 */
  await userStore.getUserInfo(userStore.userInfo.id);

  /* 隐藏输入框 */
  signatureInput.value = false;
  signatureIsEditingIcon.value = false;



}


// #endregion


// #region 第三个卡片是否可见的开关
const myPostSwitch = ref(userStore.info.isPublicPost === 1);

/* 切换是否其他用户是否可见我的帖子的方法 */
const handlePostSwitch = async () => {

  await updateIsPublicPostApi(userStore.userInfo.id, myPostSwitch.value);

  //再次获得我自己的信息
  userStore.getUserInfo(userStore.userInfo.id);
}


// #endregion


// #region 计算属性根据不同的身份显示不同的内容
const isWhoPost = computed(() => {
  return userStore.userInfo.id === userStore.info.id ? '我的帖子' : `${userStore.info.username}的帖子`;
});

// #endregion


// #region 获得该用户的帖子
const postList = ref([]);

const getPost = async () => {

  // 获取用户的帖子
  const res = await getPostsListApi({ userId: userStore.userInfo.id, browseUserId: userStore.info.id });
  postList.value = res;
}

// #endregion

// #region switch折叠帖子列表
const foldSwitch = ref(false);
const postCard = ref(null);


const handleFoldSwitch = (value) => {

  foldSwitch.value = value


  if (foldSwitch.value) {
    nextTick(() => {
      postCard.value.style.maxHeight = '100px';

    })
  } else {

    nextTick(() => {
      postCard.value.style.maxHeight = '2000px';

    })
  }

}
// #endregion


// #region 我的帖子分页代码
const myPostCurrentPage = ref(1);

/* 切换分页代码 */
const handleChangePage = async () => {

  /* 获得帖子 */
  postList.value = await getPostsListApi({ currentPage: myPostCurrentPage.value, userId: userStore.userInfo.id, browseUserId: userStore.info.id });
}

// #endregion


// #region 申诉框
const complaint = ref(false);
const form = ref({
  reason: '',
});

// 打开申诉框并打印 postId
const openComplaint = (postId) => {
  console.log(postId);
  complaint.value = true; // 打开申诉框
}

// 关闭申诉框
const closeComplaint = () => {
  complaint.value = false; // 关闭申诉框
  form.value.reason = ''; // 清空申诉原因
}

// 提交申诉
const submitComplaint = () => {
  if (form.value.reason.trim() === '') {
    console.error('申诉原因不能为空');
    return; // 如果原因为空，不执行提交逻辑
  }

  // 在这里你可以添加提交申诉的逻辑，比如发送请求到后端
  console.log('提交申诉:', form.value.reason);

  // 提交后关闭申诉框
  closeComplaint();
};
// #endregion


// #region 是否可见收藏的代码
const myCollectionSwitch = ref(userStore.info.isCollection === 1);

/* 切换是否其他用户是否可见我的收藏的方法 */
const handleCollectionSwitch = async () => {

  await updateIsPublicCollectionApi(userStore.userInfo.id, myCollectionSwitch.value);

  //再次获得我自己的信息
  userStore.getUserInfo(userStore.userInfo.id);
}
// #endregion


// #region 获得该用户的收藏
const collectionList = ref([]);

const getCollection = async () => {
  // 获取用户的帖子
  const res = await getCollectionListApi({ userId: userStore.userInfo.id, browseUserId: userStore.info.id });
  collectionList.value = res;

}

// #endregion


// #region 显示是谁的收藏代码
const isWhoCollection = computed(() => {
  return userStore.userInfo.id === userStore.info.id ? '我的收藏' : `${userStore.info.username}的收藏`;
});


// #endregion

// #region 我的收藏分页代码
const myCollectionCurrentPage = ref(1);

/* 切换分页代码 */
const handleChangeCollectionPage = async () => {

  /* 获得帖子 */
  collectionList.value = await getCollectionListApi({ currentPage: myCollectionCurrentPage.value, userId: userStore.userInfo.id, browseUserId: userStore.info.id });
}

// #endregion


// #region 更换用户头像
/* 需要配合一个Input标签，点击图标时，js点击这个input,然后触发change事件，获取到图片文件，然后上传到服务器，更新用户头像 */
const fileInputRef = ref(null);

/* 点击图标的方法 */
const updateUserAvatar = () => {
  fileInputRef.value.click();
}

/* 真正上传图片的方法 */
const handleAvatarChange = async (event) => {

  const file = event.target.files[0];

  // 检查文件是否存在
  if (!file) {
    ElMessage.error('请上传一个文件');
    return;
  }

  // 判断文件大小，限制为2MB
  const maxFileSize = 2 * 1024 * 1024; // 2MB
  if (file.size > maxFileSize) {
    ElMessage.error('文件大小不能超过2MB');
    return;
  }

  // 判断文件类型，只允许JPG和PNG格式
  const validTypes = ['image/jpeg', 'image/png'];
  if (!validTypes.includes(file.type)) {
    ElMessage.error('只允许上传JPG或PNG格式的图片');
    return;
  }

  const formData = new FormData();
  formData.append('type', "userId," + userStore.userInfo.id);
  formData.append('file', file);

  const res = await updateUserAvatarApi(formData);

  if (res !== null) {
    ElMessage.success('头像更新成功');
    // 重新获取用户信息
    await userStore.getUserInfo(userStore.userInfo.id);
  } else {
    ElMessage.error('头像更新失败');
  }
}


// #endregion

// #region 关注按钮的代码

/* 查询该用户是否是自己的关注代码 */
const isAttention = ref(false);
const isMyAttention = async () => {
  const res = await getFansIsMyAttentionApi(userStore.userInfo.id, userStore.info.id)
  isAttention.value = res.data;
}


/* 取消关注代码 */
const cancelAttention = async () => {
  const res = await cancelAttentionApi(userStore.userInfo.id, userStore.info.id)
  ElMessage.success(res.data);

  /* 重新获得关注状态 */
  await isMyAttention()
}

/* 添加关注代码 */
const addAttention = async () => {
  const res = await addAttentionApi(userStore.userInfo.id, userStore.info.id)
  ElMessage.success(res.data);

  /* 重新获得关注状态 */
  await isMyAttention()
}

// #endregion



// #region 发消息按钮代码
const toMessageChat = async () => {
  /* 与该用户建立连接 */
  const res = await EstablishConnectionApi(userStore.userInfo.id, userStore.info.id)

  router.push(`/message/chat/${userStore.info.id}`);
}
// #endregion


// #region 手机端代码
/* 判断当前是否是手机端 */
const isMobile = computed(() => {
  return window.innerWidth < 768;
});
// #endregion



/* 监视路由 */
watch(route, async () => {
  /* 切换用户时，重新获取用户信息 */
  await userStore.getUserInfo(route.params.userId);
  /* 获取用户的帖子 */
  await getPost();
  /* 获取用户收藏帖子 */
  await getCollection();

  /* 获取这个用户是否是自己的关注 */
  /* 不是自己的页面才需要询问这件事 */
  if (!isOwnUserPage.value) {
    isMyAttention();
  }
})


onMounted(async () => {

  //获取用户信息
  try {
    await userStore.getUserInfo(route.params.userId);
  } catch (err) {
    //返回上一个页面
    router.go(-1);
  }

  /* 获取用户的帖子 */
  await getPost();

  /* 获取用户收藏帖子 */
  await getCollection();

  /* 获取这个用户是否是自己的关注 */
  /* 不是自己的页面才需要询问这件事 */
  if (!isOwnUserPage.value) {
    isMyAttention();
  }
})
</script>

<template>
  <div class="user-container">

    <!-- 第一个卡片 -->
    <el-card class="card">
      <el-row>
        <el-col :span="dynamicAvatar">
          <div class="avatar">

            <el-avatar class="avatar-img" shape="circle" :size="60" fit="fill" :src="userStore.info.avatar" />
            <div class="overlay" v-if="isOwnUserPage"></div>
            <svg-icon name="xiugaitupian" v-if="isOwnUserPage" @click="updateUserAvatar" class="overlay-svg"
              color="white"></svg-icon>

            <!-- 隐藏的文件输入 -->
            <input type="file" @change="handleAvatarChange" accept="image/*" style="display:none" ref="fileInputRef" />

          </div>
        </el-col>
        <el-col :span="dynamicName">
          <span class="name">{{ userStore.info.username }}</span>
          <span v-if="!isOwnUserPage">

            <el-button type="primary" @click="toMessageChat">发消息</el-button>

            <el-button v-if="isAttention" @click="cancelAttention" type="danger">取消关注</el-button>
            <el-button v-else @click="addAttention" type="danger">关注</el-button>
          </span>
          <p style="margin-top: 10px;">{{ isOwnUserPage ? '我' : 'ta' }}已来到本论坛{{ time }}天</p>

          <div class="associated">
            <a @click="toFans">
              <div class="fans">
                <h4>{{ userStore.info.numberOfFans }}</h4>
                <span>粉丝</span>
              </div>
            </a>
            <a @click="toAttention">
              <div class="focus">
                <h4>{{ userStore.info.numberOfAttention }}</h4>
                <span>关注</span>
              </div>
            </a>
            <a @click="toGood">
              <div class="praise">
                <h4>{{ userStore.info.numberOfGood }}</h4>
                <span>获赞</span>
              </div>
            </a>
          </div>

        </el-col>
      </el-row>
    </el-card>


    <!-- 第二个卡片 -->
    <el-card class="card">
      <el-descriptions title="基础信息" :column="1" size="large">
        <!-- <el-descriptions-item label="用户昵称:"></el-descriptions-item> -->
        <el-descriptions-item label="用户昵称:">
          <div v-if="!userNameInput" class="editor" @mouseenter.native="UserNameIsEditingMouseEnter"
            @mouseleave.native="UserNameIsEditingMouseLeave">
            <span>{{ userStore.info.username }}</span>
            <svg-icon name="xiugai" v-if="userNameIsEditing" @click="checkUpdateUserNameTime"></svg-icon>
          </div>
          <div v-else class="userNameEditorDiv">
            <el-input ref="userNameRef" maxlength="11" minlength="2" class="userNameEditorInput" v-model="newUserName"
              placeholder="请输入新的昵称" @keyup.enter="handleUserNameEditor" @blur="cancelUserNameEditor"></el-input>
            <span>用户名长度为2-11个字符，支持中英文、数字、下划线。修改后一个月不能再次修改</span>
          </div>
        </el-descriptions-item>


        <el-descriptions-item label="性别:">
          <div v-if="!genderRadio" class="editor" @mouseenter.native="genderIsEditingMouseEnter"
            @mouseleave.native="genderIsEditingMouseLeave">
            <span>{{ userStore.info.gender }}</span>
            <svg-icon name="xiugai" v-if="genderIsEditing" @click="switchSelect"></svg-icon>
          </div>
          <div v-else class="userNameEditorDiv">
            <el-radio-group v-model="radio">
              <el-radio value="男" size="large">男</el-radio>
              <el-radio value="女" size="large">女</el-radio>
            </el-radio-group>
            <el-button @click="switchGender" style="margin-left: 20px;" type="primary">确定</el-button>
            <el-button @click="genderRadio = false" style="margin-left: 20px;" type="danger">取消</el-button>
          </div>
        </el-descriptions-item>


        <el-descriptions-item label="个性签名:">
          <div v-if="!signatureInput" class="editor" @mouseenter.native="signatureIsEditingMouseEnter"
            @mouseleave.native="signatureIsEditingMouseLeave">
            {{ userStore.info.signature || '这个人很懒，什么都没留下' }}
            <svg-icon name="xiugai" v-if="signatureIsEditingIcon" @click="accordingSignatureInput"></svg-icon>
          </div>
          <div v-else class="userNameEditorDiv" :style="{ width: isMobile ? '200px' : '500px' }">
            <el-input ref="signatureRef" v-model="newSignature" placeholder="来个超帅的个签吧！"
              @keyup.enter="handleSignatureEditor" @blur="cancelSignatureEditor"></el-input>
          </div>


        </el-descriptions-item>

        <!-- <el-descriptions-item label="出生日期">
          <el-date-picker v-model="value1" :editable="false" type="date" placeholder="请选择您的出生日期" :size="size" />
        </el-descriptions-item> -->
      </el-descriptions>


    </el-card>




    <!-- 第三个卡片 -->
    <el-card class="card">
      <div class="postCard" ref="postCard">
        <!-- 不是自己的主页，加上myPostSwitch等于false才是不可见 -->
        <el-descriptions :title="isWhoPost" :column="1" size="large">
          <el-descriptions-item v-if="isOwnUserPage" label="公开我的帖子:">
            <el-switch v-model="myPostSwitch" @change="handlePostSwitch" />
            <!-- 折叠帖子 -->
            <span style="margin-left: 50px; margin-right: 15px;">收起帖子:</span>
            <el-switch v-model="foldSwitch" @change="handleFoldSwitch" />
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="isOwnUserPage || postList.total > 0">

          <post v-for="item in postList.records" :key="item.id" :postData="item" :editor="true"
            :openComplaint="openComplaint" :getPost="getPost"></post>

          <el-pagination class="pagination" v-model:current-page="myPostCurrentPage" background :page-size="10"
            layout="prev, pager, next" :total="postList.total" @current-change="handleChangePage" />
        </div>


        <div v-else>
          <el-empty description="该用户的帖子暂时不可见"></el-empty>
        </div>


        <!-- 申诉框 -->
        <el-dialog v-model="complaint" title="封禁申诉" width="800">
          <el-form ref="form" :model="form" label-width="100px" :rules="rules" status-icon>
            <el-form-item label="原因" prop="reason">
              <el-input type="textarea" v-model="form.reason" placeholder="请输入申诉理由"></el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <el-button @click="complaint = false">取消</el-button>
            <el-button type="primary" @click="submitComplaint">提交</el-button>
          </div>
        </el-dialog>

      </div>
    </el-card>



    <!-- 第四个卡片 -->
    <el-card class="card">
      <div class="postCard" ref="collectionCard">
        <!-- 不是自己的主页，加上myPostSwitch等于false才是不可见 -->
        <el-descriptions :title="isWhoCollection" :column="1" size="large">
          <el-descriptions-item v-if="isOwnUserPage" label="公开我的收藏:">
            <el-switch v-model="myCollectionSwitch" @change="handleCollectionSwitch" /></el-descriptions-item>
        </el-descriptions>

        <div v-if="isOwnUserPage || collectionList.total > 0">

          <post v-for="item in collectionList.records" :key="item.id" :postData="item" :editor="true"
            :getCollection="getCollection"></post>

          <el-pagination class="pagination" v-model:current-page="myCollectionCurrentPage" background :page-size="10"
            layout="prev, pager, next" :total="collectionList.total" @current-change="handleChangeCollectionPage" />
        </div>
        <div v-else>
          <el-empty description="该用户的收藏暂时不可见"></el-empty>
        </div>
      </div>
    </el-card>


  </div>
</template>

<style lang='scss' scoped>
//电脑端样式
@media screen and (min-width: 768px) {
  .user-container {
    padding-top: $tarBar-height;
    // border: 1px solid red;
    min-height: 100vh;


    .card {
      margin: 10px 0;

      .name {
        display: inline-block;
        //好看的字体颜色
        color: #ff0000;
        // color: ;
        margin-bottom: 5px;
        margin-right: 30px;
      }

      .id {
        color: $no-highlight-color;

      }

      .associated {
        display: flex;
        padding-top: 10px;



        h4 {
          font-size: 14px;
          font-weight: bold;

        }



        span {
          color: $no-highlight-color;
        }

        .fans,
        .focus,
        .praise {
          // border: 1px solid red;
          padding: 0 10px;
          text-align: center;
        }
      }

    }


    //图片样式
    .avatar {
      position: relative;
      display: inline-block;
      /* 或者你需要的其他布局方式 */
    }

    .overlay {
      height: 60px;
      width: 60px;
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* 半透明黑色遮罩 */
      background-color: rgba(0, 0, 0, 0.5);
      /* 初始透明度为0，不显示覆盖层 */
      opacity: 0;
      /* 动画效果 */
      transition: opacity 0.3s;
    }

    .overlay-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 20px;
      opacity: 0;
    }



    .avatar:hover .overlay,
    .avatar:hover .overlay-svg {
      opacity: 1;
      cursor: pointer;
    }


    .userNameEditorDiv {
      display: flex;
      align-items: center;

      .userNameEditorInput {
        width: 200px;
      }

      & span {
        margin-left: 10px;
        color: #a29f9f;
      }
    }


    //修改通用样式
    .editor {
      display: inline-block;


      & span {
        margin-right: 3px;
      }

      &:hover {
        cursor: pointer;
      }
    }

  }


  /* 分页样式 */
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }

  .postCard {
    // 高度变化的动画效果
    transition: max-height 0.5s ease;
    /* 设置过渡效果 */
  }

}


//手机端样式
@media screen and (max-width: 768px) {
  .user-container {
    padding-top: $tarBar-height;

    .card {
      margin: 10px 0;

      .name {
        display: inline-block;
        //好看的字体颜色
        color: #ff0000;
        margin-bottom: 5px;
        margin-right: 10px;
      }

      .id {
        color: $no-highlight-color;

      }

      .associated {
        display: flex;
        padding-top: 10px;



        h4 {
          font-size: 14px;
          font-weight: bold;

        }



        span {
          color: $no-highlight-color;
        }

        .fans,
        .focus,
        .praise {
          // border: 1px solid red;
          padding: 0 10px;
          text-align: center;
        }
      }

    }


    .avatar {
      position: relative;
      display: inline-block;
      /* 或者你需要的其他布局方式 */
    }

    .overlay {
      height: 60px;
      width: 60px;
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* 半透明黑色遮罩 */
      background-color: rgba(0, 0, 0, 0.5);
      /* 初始透明度为0，不显示覆盖层 */
      opacity: 0;
      /* 动画效果 */
      transition: opacity 0.3s;
      display: none;
    }

    .overlay-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 20px;
      // opacity: 0;
      display: none;
    }


    /* 修改图片 */
    .avatar:hover .overlay,
    .avatar:hover .overlay-svg {
      display: block;
      opacity: 1;
    }


    .postCard {
      font-size: 14px;
      // 高度变化的动画效果
      transition: max-height 0.5s ease;
      /* 设置过渡效果 */
    }

    /* 分页器 */
    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

  }

}
</style>
